<template>
	<view class="adv-box ma20">
		<!-- 模板1-->
		<view class="x-f temp_1" v-if="detail.style === 1">
			<image style="width:710rpx;height:220rpx;border-radius: 10rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
		</view>
		<!-- 模板2-->
		<view class="type1 x-f mr_bottom" v-if="detail.style === 2">
			<image class="type1-img mr10" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
			<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
		</view>
		<!-- 模板3-->
		<view class="type2 x-f mr_bottom" v-if="detail.style === 3">
			<view class="type2-img1 mr10"><image class="type2-img1 " @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image></view>
			<view class="type2-box y-f">
				<image class="type2-img2 mb10" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
				<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 模板4-->
		<view class="type3 x-f mr_bottom" v-if="detail.style === 4">
			<view class="type3-box y-f mr10">
				<image class="type3-img1 mb10" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
				<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
			</view>
			<view class="type3-img2"><image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image></view>
		</view>
		<!-- 模板5-->
		<view class="type4 y-f mr_bottom" v-if="detail.style === 5">
			<view class="type4-box x-f">
				<image class="type4-img1 mr10" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
				<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
			</view>
			<view class="type4-img2 mt10"><image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image></view>
		</view>
		<!-- 模板6-->
		<view class="type5 y-f mr_bottom" v-if="detail.style === 6">
			<view class="type5-img1 mb10"><image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image></view>
			<view class="type5-box x-f">
				<image class="type5-img2 mr10" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
				<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 模板7-->
		<view class="type6 y-f mr_bottom" v-if="detail.style === 7">
			<view class="x-f type6-box1 mb10">
				<image class="type6-img1 mr10" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
				<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
			</view>
			<view class="x-f type6-box2">
				<image class="type6-img2 mr10" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
				<image class="type6-img2 mr10" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" mode="aspectFill"></image>
				<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义之广告魔方
 * @property {Object} detail -广告魔方信息
 */
export default {
	components: {},
	data() {
		return {};
	},
	props: {
		detail: {}
	},
	computed: {},
	created() {},
	methods: {
		// 路由跳转
		jump(path) {
			this.$tools.routerTo(path);
		}
	}
};
</script>

<style lang="scss" scoped>
	.ma20{
		margin-top: 0;
		margin-bottom: 0;
	}
	.mr_bottom{
		margin-top: 12rpx;
	}
	.temp_1{
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
@mixin grid($row: 1) {
	width: (710 - ($row - 1) * 10) / $row + rpx;
	border-radius: 10rpx;
}
.adv-box {
	.type1 {
		.type1-img {
			@include grid(2);
			height: 220rpx;
		}
	}
	.type2 {
		.type2-img1 {
			height: 350rpx;
			@include grid(2);
		}
		.type2-box {
			.type2-img2 {
				height: 170rpx;
				@include grid(2);
			}
		}
	}
	.type3 {
		.type3-box {
			.type3-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}
		.type3-img2 {
			height: 350rpx;
			@include grid(2);
		}
	}
	.type4 {
		.type4-box {
			.type4-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}
		.type4-img2 {
			@include grid(1);
			height: 220rpx;
		}
	}
	.type5 {
		.type5-img1 {
			@include grid(1);
			height: 220rpx;
		}
		.type5-box {
			.type5-img2 {
				height: 170rpx;
				@include grid(2);
			}
		}
	}
	.type6 {
		.type6-box1 {
			.type6-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}
		.type6-box2 {
			.type6-img2 {
				height: 170rpx;
				@include grid(3);
			}
		}
	}
}
</style>
